<template>
    <div style='position: relative; background-color: black; height: 100%; margin: 0 0; padding: 0'>
        <div>
            <video-connect></video-connect>
        </div>
        <div style='position:absolute;top:10px;left:10px;bottom:10px;right:10px; width: 98%'>
            <el-carousel
                arrow='never'
                :autoplay='false'
                ref='carousel'
                :loop='false'
                style='height: 580px'
            >
                <el-carousel-item v-show="vis" style='height: 580px'>
                    <game-mode-dash2></game-mode-dash2>
                </el-carousel-item>
                <el-carousel-item v-show="vis" style='height: 580px'>
                    <game-mode-dash></game-mode-dash>
                </el-carousel-item>
            </el-carousel>
        </div>
    </div>
</template>

<script>
import videoConnect from '@/components/common/templates/videoConnect';
import GameModeDash from '@/components/pages/GameModeDash';
import GameModeDash2 from '@/components/pages/GameModeDash2';
import screenfull from 'screenfull'
export default {
    name: 'GameModeHome',

    data() {
        return {
            isFull : false,
            vis : true
        };
    },
    components: {
        videoConnect,
        GameModeDash,
        GameModeDash2
    },
    created() {
        var _this = this;
        document.body.style.zoom = '100%'
        if(navigator.getGamepads()[0]) {
            _this.startgamepad(); // 启动手柄
        }
        // 监听游戏手柄
        window.addEventListener('gamepadconnected', function(e) {
            var gp = navigator.getGamepads()[e.gamepad.index];
            // console.log(gp);
            _this.startgamepad(); // 启动手柄
        });
        // 监听游戏手柄拔出
        window.addEventListener('gamepaddisconnected', function(e) {
            clearInterval(_this.interval); // 停止获取手柄数据
        });


    },
    methods : {
        setActiveItemNext() {
            this.$refs.carousel.next();
        },
        setActiveItemPrev() {
            this.$refs.carousel.prev();
        },
        // 启动手柄
        startgamepad() {
            var _this = this;
            if (this.isFull == false) {
                this.fullScreen()
            }
            // 每200ms 获取一次手柄数据，查看是否按下手柄按键
            this.interval = setInterval(function() {
                var gamepad = navigator.getGamepads()[0];
                _this.pressKey(gamepad.buttons);
            }, 200);
        },
        // 手柄按键
        pressKey(arr) {
            // console.log(arr);
            for (let i = 0; i < arr.length; i++) {
                if (arr[i].value === 1) {
                    if (i === 4) {
                        console.log('左手1');
                        this.setActiveItemPrev();
                    }
                    if (i === 5) {
                        console.log('右手1');
                        this.setActiveItemNext();
                    }
                    if (i == 2) {
                        console.log('X' + this.isFull);
                        if (this.isFull) {
                            this.exitFullScreen()
                        }
                        else {
                            this.fullScreen()
                        }
                    }
                    if (i === 8) {
                        this.vis = this.vis === false;
                    }
                }

            }
        },
        fullScreen() {
            this.isFull = true
            var el = document.documentElement;
            var rfs = el.requestFullScreen || el.webkitRequestFullScreen ||
                el.mozRequestFullScreen || el.msRequestFullScreen;
            if (typeof rfs != "undefined" && rfs) {
                rfs.call(el);
            } else if (typeof window.ActiveXObject != "undefined") {
                var wscript = new ActiveXObject("WScript.Shell");
                if (wscript != null) {
                    wscript.SendKeys("{F11}");
                }
            }
        },
        exitFullScreen(el) {
            this.isFull = false
            var el = document
            var cfs = el.cancelFullScreen || el.mozCancelFullScreen || el.msExitFullscreen || el.webkitExitFullscreen ||
                el.exitFullscreen,
                wscript
            if (cfs) {
                cfs.call(el);
                return;
            } else if (typeof window.ActiveXObject !== "undefined") {
                var wscript = new ActiveXObject("WScript.Shell");
                if (wscript != null) {
                    wscript.SendKeys("{F11}");
                }
            } else {
                alert('浏览器不支持全屏API或已被禁用')
            }
        }
    }
};
</script>

<style scoped>
* {
    color: #C0911F;
}
</style>
